import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/pages/Home";
import Login from "@/pages/Login";
import Music from "@/pages/Home/components/Music";
import Play from "@/pages/Home/components/Play";
import Game from "@/pages/Home/components/Game";
import NotFound from "@/pages/404";
//把VueRouter作为插件使用
Vue.use(VueRouter);

//实例化VueRouter得到router对象
const router = new VueRouter({
  //配置路由表
  routes: [
    //默认路由
    {
      path: "/",
      //重定向
      redirect: "/home",
    },
    {
      path: "/login",
      component: Login,
      name: "login",
    },
    /* 
        命名路由
          有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
          可以在创建 Router 实例的时候，在 routes 配置中给某个路由通过name属性设置名称。
      */
    {
      path: "/home",
      component: Home,
      name: "home",
      //默认子路由(推荐方式)
      redirect: "/home/music",
      children: [
        //默认子路由(一般不用)
        // {
        //   path: "/home",
        //   redirect: "/home/music",
        // },
        {
          path: "/home/music",
          component: Music,
          name: "music",
        },
        {
          path: "/home/play",
          component: Play,
          name: "play",
        },
        {
          path: "/home/game",
          name: "game",
          component: Game,
        },
      ],
    },
    {
      path: "/*",
      component: NotFound,
    },
  ],
});
export default router;
